<template>
	<div>
		<div class="my-reply">
			<div style="display: flex">
				<el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
				<div class="reply-info">
					<el-input
						v-model="replyComment"
						placeholder="请输入评论"
						type="textarea"
						autosize
						resize="none"
						clearable
						style="font-size: 17px"
					/>
				</div>
			</div>
			<div class="reply-btn-box">
				<el-button class="reply-btn" size="default" @click="sendComment" type="primary">发表评论</el-button>
			</div>
		</div>
		<div v-for="(item,i) in comments" :key="i" class="author-title reply-father">
			<el-avatar class="header-img" :size="40" :src="item.headImg"></el-avatar>
			<div class="author-info">
				<span class="author-name">{{ item.name }}</span>
				<span class="author-time">{{ item.time }}</span>
			</div>
			<div class="icon-btn" style="margin-right: 10px;">
				<span style="justify-content: left;width: 40px;display: inline-flex;">
					<icon-comments style="display: inline-flex;align-items: center;margin-right: 5px;"
								   @click="showReplyInput(i,item.name,item.id)"
								   theme="outline" size="16" fill="#333"/>{{ item.commentNum }}
				</span>
				<span style="justify-content: left;width: 40px;display: inline-flex;">
					<icon-good-two style="display: inline-flex;align-items: center;margin-left: 10px;margin-right: 5px;"
								   theme="outline" size="16" fill="#333"/>{{ item.like }}
				</span>
			</div>
			<div class="talk-box">
				<p>
					<span class="reply">{{ item.comment }}</span>
				</p>
			</div>
			<div class="reply-box">
				<div v-for="(reply,j) in item.reply" :key="j" class="author-title">
					<el-avatar class="header-img" :size="40" :src="reply.fromHeadImg"></el-avatar>
					<div class="author-info">
						<span class="author-name">{{ reply.from }}</span>
						<span class="author-time">{{ reply.time }}</span>
					</div>
					<div class="icon-btn">
						<span style="justify-content: left;width: 40px;display: inline-flex;">
							<icon-comments style="display: inline-flex;align-items: center;margin-right: 5px;"
										   @click="showReplyInput(i,reply.from,reply.id)" theme="outline" size="16"
										   fill="#333"/>{{ item.commentNum }}
						</span>
						<span style="justify-content: left;width: 40px;display: inline-flex;">
							<icon-good-two
								style="display: inline-flex;align-items: center;margin-left: 10px;margin-right: 5px;"
								theme="outline" size="16" fill="#333"/>{{ reply.like }}
						</span>
					</div>
					<div class="talk-box">
						<p>
							<span>回复 {{ reply.to }}:</span>
							<span class="reply">{{ reply.comment }}</span>
						</p>
					</div>
				</div>
			</div>
			<div v-show="_inputShow(i)" class="my-reply my-comment-reply">
				<div style="display: flex">
					<el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
					<div class="reply-info">
						<el-input
							v-model="lowReplyComment"
							placeholder="请输入评论"
							type="textarea"
							autosize
							clearable
							style="font-size: 17px"
							resize="none"
						/>
					</div>
				</div>
				
				<div class=" reply-btn-box">
					<el-button class="reply-btn" size="default" @click="sendCommentReply(i,j)" type="primary">发表评论
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

export default {
	name: 'ArticleComment',
	data() {
		return {
			btnShow: true,
			index: '0',
			replyComment: '',
			lowReplyComment: '',
			myName: 'Lana Del Rey',
			myHeader: 'http://riwc83tf2.hn-bkt.clouddn.com/FmWX4x3xlXP88rnIvBNkQkhs2l_G',
			myId: 19870621,
			to: '',
			toId: -1,
			comments: [
				{
					name: 'Lana Del Rey',
					id: 19870621,
					headImg: 'http://riwc83tf2.hn-bkt.clouddn.com/FmWX4x3xlXP88rnIvBNkQkhs2l_G',
					comment: '我发布一张新专辑Norman Fucking Rockwell,大家快来听啊',
					time: '2019年9月16日 18:43',
					commentNum: 2,
					like: 15,
					inputShow: false,
					reply: [
						{
							from: 'Taylor Swift',
							fromId: 19891221,
							fromHeadImg: 'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
							to: 'Lana Del Rey',
							toId: 19870621,
							comment: '我很喜欢你的新专辑！！',
							time: '2019年9月16日 18:43',
							commentNum: 1,
							like: 15,
							inputShow: false
						},
						{
							from: 'Ariana Grande',
							fromId: 1123,
							fromHeadImg: 'https://ae01.alicdn.com/kf/Hf6c0b4a7428b4edf866a9fbab75568e6U.jpg',
							to: 'Lana Del Rey',
							toId: 19870621,
							comment: '别忘记宣传我们的合作单曲啊',
							time: '2019年9月16日 18:43',
							commentNum: 0,
							like: 5,
							inputShow: false
							
						}
					]
				},
				{
					name: 'Taylor Swift',
					id: 19891221,
					headImg: 'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
					comment: '我发行了我的新专辑Lover',
					time: '2019年9月16日 18:43',
					commentNum: 1,
					like: 5,
					inputShow: false,
					reply: [
						{
							from: 'Lana Del Rey',
							fromId: 19870621,
							fromHeadImg: 'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
							to: 'Taylor Swift',
							toId: 19891221,
							comment: '新专辑和speak now 一样棒！',
							time: '2019年9月16日 18:43',
							commentNum: 25,
							like: 5,
							inputShow: false
							
						}
					]
				},
				{
					name: 'Norman Fucking Rockwell',
					id: 20190830,
					headImg: 'https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg',
					comment: 'Plz buy Norman Fucking Rockwell on everywhere',
					time: '2019年9月16日 18:43',
					commentNum: 0,
					like: 5,
					inputShow: false,
					reply: []
				},
			]
		}
	},
	methods: {
		showReplyInput(i, name, id) {
			this.comments[this.index].inputShow = false
			this.index = i
			this.comments[i].inputShow = true
			this.to = name
			this.toId = id
		},
		_inputShow(i) {
			return this.comments[i].inputShow
		},
		sendComment() {
			if (!this.replyComment) {
				this.$message({
					showClose: true,
					type: 'warning',
					message: '评论不能为空'
				})
			} else {
				let a = {}
				let input = document.getElementById('replyInput')
				let timeNow = new Date().getTime();
				let time = this.dateStr(timeNow);
				a.name = this.myName
				a.comment = this.replyComment
				a.headImg = this.myHeader
				a.time = time
				a.commentNum = 0
				a.like = 0
				this.comments.push(a)
				this.replyComment = ''
				input.innerHTML = '';
				
			}
		},
		sendCommentReply(i, j) {
			if (!this.lowReplyComment) {
				this.$message({
					showClose: true,
					type: 'warning',
					message: '评论不能为空'
				})
			} else {
				let a = {}
				let timeNow = new Date().getTime();
				let time = this.dateStr(timeNow);
				a.from = this.myName
				a.to = this.to
				a.fromHeadImg = this.myHeader
				a.comment = this.lowReplyComment
				a.time = time
				a.commentNum = 0
				a.like = 0
				this.comments[i].reply.push(a)
				this.lowReplyComment = ''
				document.getElementsByClassName("reply-comment-input")[i].innerHTML = ""
			}
		},
		onDivInput: function (e) {
			this.replyComment = e.target.innerHTML;
		},
		dateStr(date) {
			//获取js 时间戳
			let time = new Date().getTime();
			//去掉 js 时间戳后三位，与php 时间戳保持一致
			time = parseInt((time - date) / 1000);
			//存储转换值
			let s;
			if (time < 60 * 10) {//十分钟内
				return '刚刚';
			} else if ((time < 60 * 60) && (time >= 60 * 10)) {
				//超过十分钟少于1小时
				s = Math.floor(time / 60);
				return s + "分钟前";
			} else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
				//超过1小时少于24小时
				s = Math.floor(time / 60 / 60);
				return s + "小时前";
			} else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
				//超过1天少于30天内
				s = Math.floor(time / 60 / 60 / 24);
				return s + "天前";
			} else {
				//超过30天ddd
				var date = new Date(parseInt(date));
				return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
			}
		}
	},
}
</script>

<script setup>
// import * from '@icon-park/vue-next';
</script>

<style lang="stylus" scoped>
.my-reply
	padding 10px
	background-color #fafbfc
	
	.header-img
		display inline-block
		vertical-align top
	
	.reply-info
		flex 1
		display inline-block
		margin-left 15px
		@media screen and (max-width: 1200px) {
			width 80%
		}
		
		.reply-input
			min-height 20px
			line-height 22px
			//padding 10px 10px
			color black
			background-color #fff
			border-radius 5px
			padding 8px
			border 2px solid rgb(204, 204, 204)
			
			&:empty:before
				content attr(placeholder)
			
			&:focus:before
				content none
			
			&:focus
				padding 8px 8px
				border 2px solid #ccc
				box-shadow none
				outline none
	
	.reply-btn-box
		height 25px
		margin 10px 0
		
		.reply-btn
			position relative
			float right

//margin-right 15px

.my-comment-reply
	margin-left 30px
	
	.reply-input
		padding 8px
		border 2px solid rgb(204, 204, 204)
		width flex

.author-title:not(:last-child)
	border-bottom: 1px solid rgba(178, 186, 194, .3)

.author-title
	padding 10px
	
	.header-img
		display inline-block
		vertical-align top
	
	.author-info
		display inline-block
		margin-left 15px
		width 60%
		height 40px
		line-height 20px
		
		> span
			display block
			cursor pointer
			overflow hidden
			white-space nowrap
			text-overflow ellipsis
		
		.author-name
			color #000
			font-size 18px
			font-weight bold
		
		.author-time
			font-size 14px
	
	.icon-btn
		justify-content right
		display: flex;
		width 30%
		padding 0 !important
		float right
		@media screen and (max-width: 1200px) {
			width 20%
			padding 7px
		}
		
		> span
			cursor pointer
		
		.iconfont
			margin 0 5px
	
	.talk-box
		margin 0 55px
		
		> p
			margin 0
		
		.reply
			font-size 16px
			color #000
	
	.reply-box
		margin 10px 0 0 25px

//background-color #efefef
</style>